<div class="row">
    <div class="setting pm_form full">
        <header-block class="settingsLabels-header-filter">
            <h2
                class="settingsLabels-title-filter"
                translate
                translate-context="Title">Custom Filters</h2>
        </header-block>

        <p translate translate-context="Info" class="alert alert-info">Add a custom filter to perform actions such as automatically labeling or archiving messages.</p>
        <p class="alert alert-info" ng-show="isFree === true && customFilters.length > 0" translate translate-context="Info">Free ProtonMail accounts are limited to 1 custom filter. Please <a ui-sref="secured.dashboard({scroll: true})">upgrade</a> to get unlimited filters.</p>

        <div class="settingsFilters-actions">
            <section class="settingsFilters-actions-buttons">
                <button class="pm_button primary" translate translate-context="Action" ng-click="addCustomFilter()">Add Filter</button>
                <button class="pm_button link" translate translate-context="Action" ng-click="addSieveFilter()">Add Sieve Filter</button>
            </section>
            <section class="settingsFilters-actions-notice help-dnd" ng-if="customFilters.length > 0" translate-context="Help" translate>You can drag and drop custom filter to order them.</section>
        </div>
        <p class="alert alert-info" ng-show="customFilters.length === 0" translate translate-context="Info">You have no custom filters.</p>
        <div ng-show="customFilters.length > 0">
            <ul class="settingsFilters-sort-container pm_sort-container" data-as-sortable="filterDragControlListeners"  is-disabled="customFilters.length === 1" ng-class="{ 'as-sortable-disabled': customFilters.length === 1 }" data-ng-model="customFilters">
                <li class="pm_sort-item" ng-repeat="filter in customFilters | orderBy: 'Priority'" as-sortable-item="">
                    <div class="pm_sort-item-content" as-sortable-item-handle="">
                        <label for="{{ filter.ID }}">
                            <span class="ellipsis" title="{{ filter.Name }}">{{ filter.Name }}</span>
                        </label>
                        <toggle class="settingsFilters-sort-toggle small" data-status="filter.Status" data-name="changeCustomFilterStatus" data-id="{{ filter.ID }}"></toggle>
                        <div>
                            <button
                                class="pm_button link"
                                ng-show="isSimple(filter)"
                                ng-click="editCustomFilter(filter)"
                                translate-context="Action"
                                translate>Edit</button>
                            <button
                                class="pm_button link"
                                ng-click="editCustomFilter(filter, true)"
                                translate-context="Action"
                                translate>Edit sieve</button>
                            <button
                                class="pm_button link text-red"
                                ng-click="deleteCustomFilter(filter)"
                                translate-context="Action"
                                translate>Delete</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
